// Mixin Guards

// 当您想要匹配表达式时，守卫很有用，而不是简单的值或 arity。如果您熟悉函数式编程，您可能已经遇到过它们。

// 为了尽可能地接近 CSS 的声明性，Less 选择通过受保护的 mixin而不是if/else语句来实现条件执行，这与@media查询特性规范相一致。

// when 即是条件

.mixin1(@color) when (lightness(@color) >= 50%) {
  background-color: black;
}

.mixin1(@color) when (lightness(@color) < 50%) {
  background-color: white;
}

.mixin1(@color) {
  color: @color;
}

.box1 {
  .mixin1(red);
}

.box2 {
  .mixin1(green);
}

// ------------------------------------

// 比较运算符的完整列表是：>, >=, =, =<, < 此外，关键字true是唯一的真值，使这两个 mixin 等效：
// 除去关键字 true 以外的值都被视为 false：（!important 就是一个关键字）

.truth(@a) when (@a) {
  font-size: 10px;
}
.truth(@a) when (@a = true) {
  font-size: 20px;
}
.aaa {
  .truth(true);
}
/*
  输出：
  .aaa {
    font-size: 10px;
    font-size: 20px;
  }
*/

// -------------------------

// 还可以将参数相互比较或与非参数进行比较：
@media: mobile;

.mixin(@a) when (@media = mobile) {
  // ...
}
.mixin(@a) when (@media = desktop) {
  // ...
}

.max(@a; @b) when (@a > @b) {
  width: @a;
}
.max(@a; @b) when (@a < @b) {
  width: @b;
}
